<template>
  <div class="df aic jcsb pr">
    <p class="main_text">原材料统计</p>
    <el-button
      type="primary"
      @click="backHome"
      >返回首页</el-button
    >
  </div>
  <div class="main pr" >
    <el-row :gutter="10">
      <el-col :span="6"  :lg="6" :md="6" :sm="24" :xs="24" style="margin-top: 10px;">
        <div class="content">
        <div class="left df fdc">
          <div class="left_li p10 br8 mb10" style="background-color: white">
            <p>今日入库数(铜)kg</p>
            <p>{{ copper }}</p>
            <p>
              昨日 <span>{{ copper_yet }}</span
            >&emsp;同比昨日&emsp;
              <span v-if="copper > copper_yet" style="color: #1ac4d1"
              >↑{{ copper_ratio }}%</span
              >
              <span v-else style="color: red">↓{{ copper_ratio }}%</span>
            </p>
          </div>
          <div class="left_li p10 br8 mb10" style="background-color: white">
            <p>今日入库数(钢铁)kg</p>
            <p>{{ steel }}</p>
            <p>
              昨日 <span>{{ steel_yet }}</span
            >&emsp;同比昨日&emsp;
              <span v-if="steel > steel_yet" style="color: #1ac4d1"
              >↑{{ steel_ratio }}%</span
              >
              <span v-else style="color: red">↓{{ steel_ratio }}%</span>
            </p>
          </div>
          <div class="left_li p10 br8 mb10" style="background-color: white">
            <p>今日入库数(铝)kg</p>
            <p>{{ aluminum }}</p>
            <p>
              昨日 <span>{{ aluminum_yet }}</span
            >&emsp;同比昨日&emsp;
              <span v-if="aluminum > aluminum_yet" style="color: #1ac4d1"
              >↑{{ aluminum_ratio }}%</span
              >
              <span v-else style="color: red">↓{{ aluminum_ratio }}%</span>
            </p>
          </div>
          <div class="left_b br8 p10" style="background-color: white">
            <div style="font-size: 0.875rem">原材料占比</div>
            <div class="pr">
              <material_echarts_1></material_echarts_1>
            </div>
          </div>
        </div>
        </div>
      </el-col>
      <el-col :span="18"  :lg="18" :md="18" :sm="24" :xs="24" style="margin-top: 10px;">
        <div class="right df fdc">
          <div class="right_main p10 br8" style="background-color: #FFFFFF">
            <div class="df aic jcsb">
              <div style="font-size: 0.875rem">原材料库存统计</div>
            </div>
            <div class="df jcse aic pt10 right_top" >
              <div class="right_top_1" >
                <div class="df aic">
                  <p style="color: #1d2129; font-size: 0.875rem">
                    库存铜总量(kg)
                  </p>
                  &nbsp;
                  <p style="font-size: 1.25rem; color: #2e2e3a">
                    {{ copperAll }}
                  </p>
                </div>
              </div >
              <div class="df">
                <div style="width: 6.25rem; height: 6.25rem" class="pr">
                  <material_echarts_4></material_echarts_4>
                </div>
                <div class="df aic">
                  <p style="color: #1d2129; font-size: 0.875rem">
                    铜积累入库(kg)
                  </p>
                  &emsp;
                  <p style="font-size: 1.25rem; color: #2e2e3a">
                    {{ copperAllIn }}
                  </p>
                </div>
              </div>
              <div class="df">
                <div style="width: 6.25rem; height: 6.25rem" class="pr">
                  <material_echarts_5></material_echarts_5>
                </div>
                <div class="df aic">
                  <p style="color: #1d2129; font-size: 0.875rem">
                    铜积累出库(kg)
                  </p>
                  &emsp;
                  <p style="font-size: 1.25rem; color: #2e2e3a">
                    {{ copperAllOut }}
                  </p>
                </div>
              </div>
            </div>
            <div class="df jcse aic pt10 right_top" >
              <div class="right_top_1">
                <div class="df aic">
                  <p style="color: #1d2129; font-size: 0.875rem">
                    库存铝总量(kg)
                  </p>
                  &nbsp;
                  <p style="font-size: 1.25rem; color: #2e2e3a">
                    {{ aluminumAll }}
                  </p>
                </div>
              </div>
              <div class="df">
                <div style="width: 6.25rem; height: 6.25rem" class="pr">
                  <material_echarts_6></material_echarts_6>
                </div>
                <div class="df aic">
                  <p style="color: #1d2129; font-size: 0.875rem">
                    铝积累入库(kg)
                  </p>
                  &emsp;
                  <p style="font-size: 1.25rem; color: #2e2e3a">
                    {{ aluminumAllIn }}
                  </p>
                </div>
              </div>
              <div class="df">
                <div style="width: 6.25rem; height: 6.25rem" class="pr">
                  <material_echarts_7></material_echarts_7>
                </div>
                <div class="df aic">
                  <p style="color: #1d2129; font-size: 0.875rem">
                    铝积累出库(kg)
                  </p>
                  &emsp;
                  <p style="font-size: 1.25rem; color: #2e2e3a">
                    {{ aluminumAllOut }}
                  </p>
                </div>
              </div>
            </div>
            <div class="df jcse aic pt10 right_top">
              <div class="right_top_1">
                <div class="df aic">
                  <p style="color: #1d2129; font-size: 0.875rem">
                    库存钢铁总量(kg)
                  </p>
                  &nbsp;
                  <p style="font-size: 1.25rem; color: #2e2e3a">{{ steelAll }}</p>
                </div>
              </div>
              <div class="df">
                <div style="width: 6.25rem; height: 6.25rem" class="pr">
                  <material_echarts_2></material_echarts_2>
                </div>
                <div class="df aic">
                  <p style="color: #1d2129; font-size: 0.875rem">
                    钢铁积累入库(kg)
                  </p>
                  &emsp;
                  <p style="font-size: 1.25rem; color: #2e2e3a">
                    {{ steelAllIn }}
                  </p>
                </div>
              </div>
              <div class="df">
                <div style="width: 6.25rem; height: 6.25rem" class="pr">
                  <material_echarts_3></material_echarts_3>
                </div>
                <div class="df aic">
                  <p style="color: #1d2129; font-size: 0.875rem">
                    钢铁积累出库(kg)
                  </p>
                  &emsp;
                  <p style="font-size: 1.25rem; color: #2e2e3a">
                    {{ steelAllOut }}
                  </p>
                </div>
              </div>
            </div>
            <div class="mt20">
              <div style="font-size: 0.875rem">其他原材料</div>
              <div class="df aic jcsb p10">
                <div class="df aic">
                  <div class="df aic">
                    <p style="color: #1d2129; font-size: 0.875rem">
                      其他库存总量(kg)
                    </p>
                    &nbsp;
                    <p style="font-size: 1.25rem; color: #2e2e3a">
                      {{ qitaAll }}
                    </p>
                  </div>
                  &emsp;&emsp;
                </div>
              </div>
            </div>
          </div>
          <div class="right_b p10 br8" style="background-color: #FFFFFF;margin-top: 10px">
            <div style="font-size: 0.875rem">原材料出入库趋势</div>
            <div class="pr">
              <material_echarts_8></material_echarts_8>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

<!--    <div class="content df jcsb">-->
<!--      <div class="left df fdc">-->
<!--        <div class="left_li p10 br8 mb20">-->
<!--          <p>今日入库数(铜)kg</p>-->
<!--          <p>{{ copper }}</p>-->
<!--          <p>-->
<!--            昨日 <span>{{ copper_yet }}</span-->
<!--            >&emsp;同比昨日&emsp;-->
<!--            <span v-if="copper > copper_yet" style="color: #1ac4d1"-->
<!--              >↑{{ copper_ratio }}%</span-->
<!--            >-->
<!--            <span v-else style="color: red">↓{{ copper_ratio }}%</span>-->
<!--          </p>-->
<!--        </div>-->
<!--        <div class="left_li p10 br8 mb20">-->
<!--          <p>今日入库数(钢铁)kg</p>-->
<!--          <p>{{ steel }}</p>-->
<!--          <p>-->
<!--            昨日 <span>{{ steel_yet }}</span-->
<!--            >&emsp;同比昨日&emsp;-->
<!--            <span v-if="steel > steel_yet" style="color: #1ac4d1"-->
<!--              >↑{{ steel_ratio }}%</span-->
<!--            >-->
<!--            <span v-else style="color: red">↓{{ steel_ratio }}%</span>-->
<!--          </p>-->
<!--        </div>-->
<!--        <div class="left_li p10 br8 mb20">-->
<!--          <p>今日入库数(铝)kg</p>-->
<!--          <p>{{ aluminum }}</p>-->
<!--          <p>-->
<!--            昨日 <span>{{ aluminum_yet }}</span-->
<!--            >&emsp;同比昨日&emsp;-->
<!--            <span v-if="aluminum > aluminum_yet" style="color: #1ac4d1"-->
<!--              >↑{{ aluminum_ratio }}%</span-->
<!--            >-->
<!--            <span v-else style="color: red">↓{{ aluminum_ratio }}%</span>-->
<!--          </p>-->
<!--        </div>-->
<!--        <div class="left_b br8 p10">-->
<!--          <div style="font-size: 0.875rem">原材料占比</div>-->
<!--          <div class="pr">-->
<!--            <material_echarts_1></material_echarts_1>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="right df fdc">-->
<!--        <div class="right_main p10 br8">-->
<!--          <div class="df aic jcsb">-->
<!--            <div style="font-size: 0.875rem">原材料库存统计</div>-->
<!--          </div>-->
<!--          <div class="df jcse aic pt20 right_top">-->
<!--            <div class="right_top_1">-->
<!--              <div class="df aic">-->
<!--                <p style="color: #1d2129; font-size: 0.875rem">-->
<!--                  库存铜总量(kg)-->
<!--                </p>-->
<!--                &nbsp;-->
<!--                <p style="font-size: 1.25rem; color: #2e2e3a">-->
<!--                  {{ copperAll }}-->
<!--                </p>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="df">-->
<!--              <div style="width: 6.25rem; height: 6.25rem" class="pr">-->
<!--                <material_echarts_4></material_echarts_4>-->
<!--              </div>-->
<!--              <div class="df aic">-->
<!--                <p style="color: #1d2129; font-size: 0.875rem">-->
<!--                  铜积累入库(kg)-->
<!--                </p>-->
<!--                &emsp;-->
<!--                <p style="font-size: 1.25rem; color: #2e2e3a">-->
<!--                  {{ copperAllIn }}-->
<!--                </p>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="df">-->
<!--              <div style="width: 6.25rem; height: 6.25rem" class="pr">-->
<!--                <material_echarts_5></material_echarts_5>-->
<!--              </div>-->
<!--              <div class="df aic">-->
<!--                <p style="color: #1d2129; font-size: 0.875rem">-->
<!--                  铜积累出库(kg)-->
<!--                </p>-->
<!--                &emsp;-->
<!--                <p style="font-size: 1.25rem; color: #2e2e3a">-->
<!--                  {{ copperAllOut }}-->
<!--                </p>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="df jcse aic pt20 right_top">-->
<!--            <div class="right_top_1">-->
<!--              <div class="df aic">-->
<!--                <p style="color: #1d2129; font-size: 0.875rem">-->
<!--                  库存铝总量(kg)-->
<!--                </p>-->
<!--                &nbsp;-->
<!--                <p style="font-size: 1.25rem; color: #2e2e3a">-->
<!--                  {{ aluminumAll }}-->
<!--                </p>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="df">-->
<!--              <div style="width: 6.25rem; height: 6.25rem" class="pr">-->
<!--                <material_echarts_6></material_echarts_6>-->
<!--              </div>-->
<!--              <div class="df aic">-->
<!--                <p style="color: #1d2129; font-size: 0.875rem">-->
<!--                  铝积累入库(kg)-->
<!--                </p>-->
<!--                &emsp;-->
<!--                <p style="font-size: 1.25rem; color: #2e2e3a">-->
<!--                  {{ aluminumAllIn }}-->
<!--                </p>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="df">-->
<!--              <div style="width: 6.25rem; height: 6.25rem" class="pr">-->
<!--                <material_echarts_7></material_echarts_7>-->
<!--              </div>-->
<!--              <div class="df aic">-->
<!--                <p style="color: #1d2129; font-size: 0.875rem">-->
<!--                  铝积累出库(kg)-->
<!--                </p>-->
<!--                &emsp;-->
<!--                <p style="font-size: 1.25rem; color: #2e2e3a">-->
<!--                  {{ aluminumAllOut }}-->
<!--                </p>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="df jcse aic pt20 right_top">-->
<!--            <div class="right_top_1">-->
<!--              <div class="df aic">-->
<!--                <p style="color: #1d2129; font-size: 0.875rem">-->
<!--                  库存钢铁总量(kg)-->
<!--                </p>-->
<!--                &nbsp;-->
<!--                <p style="font-size: 1.25rem; color: #2e2e3a">{{ steelAll }}</p>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="df">-->
<!--              <div style="width: 6.25rem; height: 6.25rem" class="pr">-->
<!--                <material_echarts_2></material_echarts_2>-->
<!--              </div>-->
<!--              <div class="df aic">-->
<!--                <p style="color: #1d2129; font-size: 0.875rem">-->
<!--                  钢铁积累入库(kg)-->
<!--                </p>-->
<!--                &emsp;-->
<!--                <p style="font-size: 1.25rem; color: #2e2e3a">-->
<!--                  {{ steelAllIn }}-->
<!--                </p>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="df">-->
<!--              <div style="width: 6.25rem; height: 6.25rem" class="pr">-->
<!--                <material_echarts_3></material_echarts_3>-->
<!--              </div>-->
<!--              <div class="df aic">-->
<!--                <p style="color: #1d2129; font-size: 0.875rem">-->
<!--                  钢铁积累出库(kg)-->
<!--                </p>-->
<!--                &emsp;-->
<!--                <p style="font-size: 1.25rem; color: #2e2e3a">-->
<!--                  {{ steelAllOut }}-->
<!--                </p>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="mt20">-->
<!--            <div style="font-size: 0.875rem">其他原材料</div>-->
<!--            <div class="df aic jcsb p20">-->
<!--              <div class="df aic">-->
<!--                <div class="df aic">-->
<!--                  <p style="color: #1d2129; font-size: 0.875rem">-->
<!--                    其他库存总量(kg)-->
<!--                  </p>-->
<!--                  &nbsp;-->
<!--                  <p style="font-size: 1.25rem; color: #2e2e3a">-->
<!--                    {{ qitaAll }}-->
<!--                  </p>-->
<!--                </div>-->
<!--                &emsp;&emsp;-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div style="height: 1.25rem"></div>-->
<!--        <div class="right_b p10 br8">-->
<!--          <div style="font-size: 0.875rem">原材料出入库趋势</div>-->
<!--          <div class="pr">-->
<!--            <material_echarts_8></material_echarts_8>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import {
  RequestStatisticGetMaterialByWarehouse,
  RequestStatisticGetMOfIAO,
} from "@/api/path/index.js";
import { useRouter } from "vue-router";
const router = useRouter();
import material_echarts_1 from "@/components/material/material_echarts_1.vue";
import material_echarts_2 from "@/components/material/material_echarts_2.vue";
import material_echarts_3 from "@/components/material/material_echarts_3.vue";
import material_echarts_4 from "@/components/material/material_echarts_4.vue";
import material_echarts_5 from "@/components/material/material_echarts_5.vue";
import material_echarts_6 from "@/components/material/material_echarts_6.vue";
import material_echarts_7 from "@/components/material/material_echarts_7.vue";
import material_echarts_8 from "@/components/material/material_echarts_8.vue";
const copper = ref<any>(""); //铜
const steel = ref<any>(""); //钢铁
const aluminum = ref<any>(""); //铝材
const copper_yet = ref<any>(""); //铜昨日
const steel_yet = ref<any>(""); //钢铁昨日
const aluminum_yet = ref<any>(""); //铝材昨日
const copper_ratio = ref<any>(""); //铜昨日比
const steel_ratio = ref<any>(""); //钢铁昨日比
const aluminum_ratio = ref<any>(""); //铝材昨日比
// const selectName = ref<any>('请选择仓库')             //铝材昨日比
// const command = (event: any) => {
//     WarehouseList.value.forEach((item: any) => {
//         if (item.warehouseId == event) {
//             selectName.value = item.warehouseName
//         }
//     });
//     RequestStatisticGetMaterialByWarehouse(event).then((res: any) => {
//         console.log('dasda', res);
//     })
// }
const copperAll = ref<any>(0); //铜
const steelAll = ref<any>(0); //钢铁
const aluminumAll = ref<any>(0); //铝材
const qitaAll = ref<any>(0); //其他所有
const copperAllIn = ref<any>(0); //铜
const steelAllIn = ref<any>(0); //钢铁
const aluminumAllIn = ref<any>(0); //铝材
const qitaAllIn = ref<any>(0); //其他所有
const copperAllOut = ref<any>(0); //铜
const steelAllOut = ref<any>(0); //钢铁
const aluminumAllOut = ref<any>(0); //铝材
const qitaAllOut = ref<any>(0); //其他所有
const getData = () => {
  RequestStatisticGetMOfIAO().then((res: any) => {
    res.resultObj.今日各原材料入库情况.forEach((item: any) => {
      if (item.type_name == "铜") {
        copper.value = item.coalesce;
      } else if (item.type_name == "钢铁") {
        steel.value = item.coalesce;
      } else if (item.type_name == "铝") {
        aluminum.value = item.coalesce;
      }
    });
    res.resultObj.昨日各原材料入库情况.forEach((item: any) => {
      if (item.type_name == "铜") {
        copper_yet.value = item.coalesce;
      } else if (item.type_name == "钢铁") {
        steel_yet.value = item.coalesce;
      } else if (item.type_name == "铝") {
        aluminum_yet.value = item.coalesce;
      }
    });
    if (copper_yet.value == 0) {
      if (copper_yet.value == 0 && copper.value == 0) {
        copper_ratio.value = "0";
      } else {
        copper_ratio.value = "100";
      }
    } else {
      copper_ratio.value =
        (((copper.value - copper_yet.value) / copper_yet.value) *100).toFixed(2);
    }
    if (steel_yet.value == 0) {
      if (steel_yet.value == 0 && steel.value == 0) {
        steel_ratio.value = "0";
      } else {
        steel_ratio.value = "100";
      }
    } else {
      (steel_ratio.value = (steel.value - steel_yet.value) / steel_yet.value*100).toFixed(2);
    }
    if (aluminum_yet.value == 0) {
      if (aluminum_yet.value == 0 && aluminum.value == 0) {
        aluminum_ratio.value = "0";
      } else {
        aluminum_ratio.value = "100";
      }
    } else {
      aluminum_ratio.value =
        ((aluminum.value - aluminum_yet.value) / aluminum_yet.value*100).toFixed(2);
    }
  });
  RequestStatisticGetMaterialByWarehouse(1).then((res: any) => {
    console.log("dasda", res);
    res.resultObj.当前数量和高低储.forEach((item: any) => {
      if (item.name == "铜") {
        copperAll.value += item.material_num;
      } else if (item.name == "钢铁") {
        steelAll.value += item.material_num;
      } else if (item.name == "铝") {
        aluminumAll.value += item.material_num;
      } else {
        qitaAll.value += item.material_num;
      }
    });
    res.resultObj.各原材料累计入库.forEach((item: any) => {
      if (item.name == "铜") {
        copperAllIn.value += item.value;
      } else if (item.name == "钢铁") {
        steelAllIn.value += item.value;
      } else if (item.name == "铝") {
        aluminumAllIn.value += item.value;
      } else {
        qitaAllIn.value += item.value;
      }
    });
    res.resultObj.各原材料累计出库.forEach((item: any) => {
      if (item.name == "铜") {
        copperAllOut.value += item.value;
      } else if (item.name == "钢铁") {
        steelAllOut.value += item.value;
      } else if (item.name == "铝") {
        aluminumAllOut.value += item.value;
      } else {
        qitaAllOut.value += item.value;
      }
    });
  });
};
// /* ************************ 获取仓库下拉数据 ************************ */
// const WarehouseList = ref<any>([])
// const getWarehouseList = () => {
//     RequestWarehouseList().then((res: any) => {
//         WarehouseList.value = res.resultObj
//     })
// }
// getWarehouseList()
getData();

/* 返回首页 */
const backHome = () => {
  router.push("/Home");
};

</script>

<style scoped lang="scss">
.listStyle {
  width: 50%;
  height: 100%;
  border-right: 0.0625rem dashed #ccc;

  &:last-child {
    border-right: none;
  }
}

.main {
  //width: v-bind(width);
  //height: 768px;
  //overflow-y: auto;
  .content {
    width: 100%;
    height: 100%;

    .left {
      //width: 17.5rem;
      height: 100%;

      .left_li {
        background-color: #fff;

        p {
          &:nth-child(1) {
            color: #b2b2b2;
            font-size: 0.875rem;
          }

          &:nth-child(2) {
            color: #2e2e3a;
            font-size: 1.5rem;
            line-height: 3.125rem;
            border-bottom: 0.0625rem dashed #e5e6eb;
          }

          &:nth-child(3) {
            color: #1c1f37;
            font-size: 0.75rem;
            margin-top: 0.625rem;

            span {
              font-weight: bold;
            }
          }
        }
      }

      .left_b {
        width: 100%;
        flex: 1;
        background-color: #fff;
      }
    }


  }
}
.right {
  //width: calc(100% - 18.75rem);
  height: 100%;

  .right_main {
    width: 100%;
    background-color: #fff;

    .right_top {
      border-bottom: 0.0625rem dashed #e5e6eb;
    }
  }

  .right_b {
    width: 100%;
    background-color: #fff;
    flex: 1;
  }
}

::v-deep .el-dropdown {
  color: #b2b2b2;
  font-size: 0.75rem;
}

::v-deep .el-radio-group {
  background-color: #f6f8fa;
  border: 0.125rem solid #f6f8fc;
}

.custom-dropdown .el-dropdown-link {
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

::v-deep .el-radio-button--small .el-radio-button__inner {
  background-color: rgba($color: #000000, $alpha: 0);
  border: none;
}

.el-dropdown-menu {
  overflow: scroll;
  max-height: 12.5rem;
  overflow-x: hidden;
}
</style>
